<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        background:url('img/0.jpg') no-repeat center/100% 100%;
    }
    .warrpt{
        position: relative;
        width: 1200px;
        height: 535px;
        margin: 100px auto;
        background: url('img/0.jpg');
        perspective: 800px;

    }
    .left,.right{
        position: absolute;
        right: 0;
        top: 0;
        width: 50%;
        height: 100%;

    }
    .left{
    
        transform-origin: left;                    /*沿left翻转*/
        transform-style: preserve-3d;               /*开启3D模型*/
        z-index: 1;
    }
    .left.on{
        transform: rotateY(-180deg);                   /*这个DIV沿Y转翻转*/
        transition: 1.5s;
    }
    .prev,.next{
        position: absolute;
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
       
    }
    .prev{
      
        background: url('img/0.jpg') no-repeat right top ;      /*目前这张右半图*/
    }
    .next{
        background: url('img/1.jpg') no-repeat left top;        /*下一半张图片  在左边*/ 
        transform: translateZ(-1px) scale(-1,1);   /*下降一层   和翻转 */
    }
    .right{
        background:url('img/1.jpg') no-repeat right top;
    }
    
    
    
    </style>
</head>
<body>
    <div class="warrpt">
        <div class="left">
            <div class="prev"></div>
            <div class="next"></div>
        </div>
        <div class="right"></div>
    </div>
<script type="text/javascript">
    (function(){
        var aleft=document.getElementsByClassName('left')[0];
    var awarrpt=document.getElementsByClassName('warrpt')[0];
    var aprev=document.getElementsByClassName('prev')[0];
    var anext=document.getElementsByClassName('next')[0];
    var aright=document.getElementsByClassName('right')[0];
    var abody=document.getElementsByTagName('body')[0];
    var index=0;
    var isCLear=false;
    var timer=null;
    awarrpt.onmouseenter= function () {
        clearInterval(timer);
       this.onclick=change;
       this.onmouseleave=function(){
           auto();
       }

        
       
    }
    auto();
    function auto(){
        timer=setInterval(change,2000);
    }
   
    function change() {
        if(isCLear) return
        isCLear=true;
        index++;
        // console.log(index);
        index %= 4;
        console.log(index);

        aleft.classList.add('on');
        document.addEventListener('transitionend',function(){//事件监听  当transition结束
            aleft.classList.remove('on');
            abody.style.backgroundImage=
            awarrpt.style.backgroundImage=
            aprev.style.backgroundImage=
            'url("img/'+index+'.jpg")';
            anext.style.backgroundImage=
            aright.style.backgroundImage=
            'url("img/'+(index+1)%4+'.jpg")';
            isCLear=false;

        });


    }

    })();

   




</script>
</body>
</html>